<template>
  <el-button type="primary" @click="addResourceDrawer=true">新增</el-button>
  <el-drawer size="70%" v-model="addResourceDrawer">
    <el-form :model="resourceDraft" label-width="120px" ref="ruleFormRef">
      <el-form-item label="编号" required prop="resourceNo">
        <el-input v-model="resourceDraft.resourceNo"/>
      </el-form-item>
      <el-form-item label="名称" required prop="resourceName">
        <el-input v-model="resourceDraft.resourceName"/>
      </el-form-item>
      <el-form-item label="所在城市" required prop="city">
        <city-input-no-x v-model:city-object="resourceDraft.city"></city-input-no-x>
      </el-form-item>
      <el-form-item label="所在地址" required prop="address">
        <el-input v-model="resourceDraft.address"/>
      </el-form-item>
      <el-form-item label="负责人电话" required prop="phone">
        <el-input v-model="resourceDraft.phone"/>
      </el-form-item>
      <el-form-item label="预设价格" required prop="defaultPrice" :rules="numRule">
        <el-input-number v-model="resourceDraft.defaultPrice"></el-input-number>
      </el-form-item>
      <el-form-item label="预设库存" required prop="defaultStore" :rules="numRule">
        <el-input-number v-model="resourceDraft.defaultStore"></el-input-number>
      </el-form-item>
      <el-form-item label="开放天数" required prop="openDay" :rules="numRule">
        <el-input-number v-model="resourceDraft.openDay"></el-input-number>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="addResource">Create</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>


  <el-table :border="true" :data="resourceList">
    <el-table-column prop="resourceNo" label="编号"/>
    <el-table-column prop="resourceName" label="名称"/>

    <el-table-column label="到达城市">
      <template v-slot="{row:{city}}">
        {{ cityToStr(city) }}
      </template>
    </el-table-column>

    <el-table-column prop="phone" label="负责人电话"/>
    <el-table-column label="商品上下架">
      <template v-slot="{row:{resourceId,sellState}}">
        <el-tag class="ml-2" :type="sellStateTagType[sellState]">
          {{ sellStateStr[sellState] }}
        </el-tag>
        <el-button type="warning" size="small"
                   v-if="sellState==1" @click="updateSellState(resourceId,0)">下架产品
        </el-button>
        <el-button type="primary" size="small"
                   v-else @click="updateSellState(resourceId,1)">上架产品
        </el-button>
      </template>
    </el-table-column>

    <el-table-column label="查看详情" v-slot="{row:{resourceId,productType}}">
      <el-button type="primary"
                 @click="$router.push(`/supplier/detail/${productTypeStr[productType]}/${resourceId}`)">
        编辑
      </el-button>
    </el-table-column>
  </el-table>

</template>

<script setup>
import axios from "~/config/axios";
import {onMounted, reactive, ref, toRefs} from "vue";
import {productType, productTypeCode, productTypeStr, sellStateStr, sellStateTagType} from "~/config/const.js"
import {cityToStr, localGet, showSuccessAndReload} from "~/config/utils.js"
import {ElMessage} from "element-plus";
import CityInputNoX from "~/components/CityInputNoX.vue";
import {useRoute} from "vue-router";

const resourceList = ref([]);
const thisProductTypeStr = useRoute().params.productTypeStr
const thisProductType = productTypeCode[thisProductTypeStr]

;(async () => {
  resourceList.value = await axios.get(`/resources/supplierQuery/${thisProductType}`)
})();
const updateSellState = (resourceId, newState) => {
  axios.post(`/resource/${resourceId}/supplierEditSellState`, {
    afterState: newState
  }).then((res) => {
    showSuccessAndReload()
  })
}
const resourceDraft = ref({})
const addResourceDrawer = ref(false)
const ruleFormRef = ref()
const addResource = () => {
  ruleFormRef.value.validate((ok) => {
    if (ok) {
      resourceDraft.value.cityId = resourceDraft.value.city.cityId
      resourceDraft.value.productType = thisProductType
      axios.post(`/resource`, resourceDraft.value)
          .then((res) => {
            showSuccessAndReload()
          })
    }
  });
}
const numRule = {
  validator: function (rules, value, callBack) {
    if (Number.isNaN(value)) {
      callBack(new Error("must input"))
    }
    callBack()
  }
}

</script>
<style scoped>
</style>